﻿<template>
    <div v-cloak class="flex-column" style="background-color: #F7F7F8; ">
        <component is="style" />
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" v-if="query.rowCount">
            账单共计{{query.rowCount}}条，总销售额：{{query.Sum}}元（其中现金：{{query.XJ}}元，微信：{{query.WX}}元，支付宝：{{query.ZFB}}元），总销售数量：{{query.Count}}，总利润：{{query.Profit}}元
        </van-notice-bar>
        <div class="flex-column-fill">
            <hxt-refresh v-model="refresh.isLoading" :has-more="refresh.hasMore" v-on:loadList="loadList">
                <div class="margin-top-10" v-for="(item,index) in list">
                    <van-card :tag="item.payType==0?'现金':item.payType==1?'微信':item.payType==2?'支付宝':''" :origin-price="item.eoOldProce" :price="item.biPrice"
                              :num="item.biCount" v-on:click="AddCar(3,item.biId)">
                        <div slot="thumb">
                            <van-image width="88px" height="111px" fit="aspectFit"
                                       src="https://img01.yzcdn.cn/vant/ipad.jpeg"></van-image>
                        </div>
                        <div slot="title" style="font-weight: 700;">
                            {{item.eoBrand}}
                        </div>
                        <div slot="desc">
                            型号：{{item.eoModel}}

                        </div>
                        <div slot="tags">
                            售出时间：{{item.time}}

                        </div>
                        <div slot="price-top">
                            适用车型：{{item.eoApplications}}
                            <!-- 时间：{{item.eoTime}} -->
                        </div>
                        <div slot="bottom" :class="item.biProfit<0?'text-red':'text-green'">
                            总利润：{{item.biProfit}}
                        </div>
                        <div slot="footer" class="flex-row">
                            <div class="flex-row-fill text-left">
                                {{item.addTime}}
                            </div>
                            <div>
                                <van-button :disabled="item.biStatus!=0||item.openId!=optor.openId" size="mini" v-on:click.stop="AddCar(1,item.biId)">
                                    退换
                                </van-button>
                                <van-button :disabled="!optor.root&&item.openId!=optor.openId" size="mini" v-on:click.stop="del(item.biId,index)">删除</van-button>
                            </div>
                        </div>
                    </van-card>
                </div>
            </hxt-refresh>
        </div>
        <hxt-popup v-model="showAdd" round closeable getContainer="body">
            <template #title>
                账单
            </template>
            <div class="bg-light flex-column padding-bottom-10">
                <template v-if="form.optType==3">
                    <van-cell-group>
                        <van-cell title="机油品牌" :value="form.eoBrand"></van-cell>
                        <van-cell title="机油型号" :value="form.eoModel"></van-cell>
                        <van-cell title="适用车型" :value="form.eoApplications"></van-cell>
                        <van-cell title="容量">
                            <div>
                                {{form.eoCapacity}}L
                            </div>
                        </van-cell>
                        <van-cell title="机油批价">
                            <div>
                                ￥{{form.eoOldProce}}
                            </div>
                        </van-cell>
                        <van-cell title="机油推荐售价">
                            <div>
                                ￥{{form.eoPrice}}
                            </div>
                        </van-cell>
                    </van-cell-group>
                    <van-cell-group title="账单信息">
                        <van-cell title="机油实际售价">
                            <div>
                                ￥{{form.biPrice}}
                            </div>
                        </van-cell>
                        <van-cell title="销售数量" :value="form.biCount"></van-cell>
                        <van-cell title="销售总额">
                            <div>
                                ￥{{form.biSum}}
                            </div>
                        </van-cell>
                        <van-cell title="采购总额">
                            <div>
                                ￥{{form.bioldSum}}
                            </div>
                        </van-cell>
                        <van-cell title="总利润">
                            <div>
                                <van-tag :type="form.biProfit>0?'success':'danger'">
                                    ￥{{form.biProfit}}
                                </van-tag>
                            </div>
                        </van-cell>
                        <van-cell title="销售时间" :value="form.time"></van-cell>
                        <van-cell title="支付方式">
                            <van-tag color="#ffe1e1" text-color="#ad0000">
                                {{form.payType==0?'现金支付':form.payType==1?'微信支付':form.payType==2?'支付宝支付':''}}
                            </van-tag>
                        </van-cell>
                        <van-cell title="入库时间" :value="form.addTime"></van-cell>
                        <van-cell title="备注" title-width="40px" :value="form.biMark"></van-cell>
                    </van-cell-group>
                    <van-cell-group title="操作员信息">
                        <van-cell title="姓名" :value="form.uiName"></van-cell>
                        <van-cell title="openid" title-width="80px" :value="form.openId"></van-cell>
                        <van-cell title="session_key" :value="form.session_key"></van-cell>
                        <van-cell title="账号" :value="form.account"></van-cell>
                        <van-cell title="操作时间" :value="form.upTime"></van-cell>
                    </van-cell-group>
                </template>
                <template v-else>
                    <van-cell-group inset>
                        <van-field label="机油" readonly required :border="false" label-width="100%" :error="!!formERR.eoBrandERR">
                            <template #label>
                                机油
                                <span v-if="!!form.eoId">（原订单：{{form.eoBrand}}【{{form.eoModel}}】） </span>
                            </template>
                        </van-field>
                        <div class="padding-lr-15 padding-bottom-10">
                            <wx-cascader v-model="form.mId" title="选择机油" :data="eo.list" active-color="#1989fa" :text="form.eoBrand+'/'+form.eoModel" v-on:change="change"></wx-cascader>
                            <div v-if="!!formERR.eoBrandERR"
                                 style="color:#ee0a24;text-align: right;margin-top: 5px;">
                                {{formERR.eoBrandERR}}
                            </div>
                        </div>                        
                    </van-cell-group>
                    <van-cell-group inset class="margin-top-10">
                        <van-field label="售出时间" readonly required placeholder="请选择售出时间" :error="!!formERR.stimeERR" :error-message="formERR.stimeERR">
                            <template #input>
                                <hxt-calendar :disabled="form.optType>0" v-model="form.currentDay" type="single" :showConfirm="false"></hxt-calendar>
                            </template>
                        </van-field>
                    </van-cell-group>
                    <van-cell-group inset class="margin-top-10">
                        <van-field label="售价" readonly required :border="false" label-width="100%">
                            <template #label>
                                售价
                                <span v-if="!!currentEo">（正常售价：￥{{currentEo.eoPrice}}）</span>
                            </template>
                        </van-field>
                        <div class="padding-lr-15 padding-bottom-10">
                            <van-stepper v-model="form.biPrice" :disabled="form.optType>0" theme="round" button-size="22" min="0" decimal-length="2" input-width="60px"></van-stepper>
                        </div>
                    </van-cell-group>
                    <van-cell-group inset class="margin-top-10">
                        <van-field readonly required :border="false" label-width="100%">
                            <template #label>
                                售出数量
                                <span v-if="!!currentEo">（{{currentEo.eoStock<=0?'库存不足，请及时补货':'库存：'+currentEo.eoStock}}）</span>
                            </template>
                        </van-field>
                        <div class="padding-lr-15 padding-bottom-10">
                            <van-stepper v-model="form.count" :disabled="form.optType>0" theme="round" button-size="22" min="0"></van-stepper>
                        </div>
                    </van-cell-group>
                    <van-cell-group inset class="margin-top-10">
                        <van-field label="支付方式" readonly required :border="false">
                        </van-field>
                        <div class="padding-lr-15 padding-bottom-10">
                            <van-radio-group :disabled="form.optType>0" v-model="form.payType" direction="horizontal">
                                <van-radio :name="0">现金支付</van-radio>
                                <van-radio :name="1">微信支付</van-radio>
                                <van-radio :name="2">支付宝支付</van-radio>
                            </van-radio-group>
                        </div>
                    </van-cell-group>
                    <van-cell-group inset class="margin-top-10">
                        <van-field label="备注" placeholder="请输入备注" v-model="form.biMark" :autosize="{ maxHeight: 100, minHeight: 40 }" type="textarea" show-word-limit maxlength="400"></van-field>
                    </van-cell-group>
                </template>
            </div>
            <template #foot>
                
                    <van-submit-bar :price="form.biPrice*form.count*100" button-text="提交订单" custom-class="submit-bar" :disabled="form.optType==3" v-on:submit="submit" :safe-area-inset-bottom="false">
                    </van-submit-bar>          
            </template>
        </hxt-popup>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'video',
            data: function () {
                return {
                    optor: hxt.store.optor,
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序
                    query: {
                        eoApplications: '',
                        mId: 0,
                        beginTime: '',
                        endTime: '',
                        pageIndex: 1,
                        pageSize: 20,
                        Sum: 0,
                        Count: 0,
                        Profit: 0,
                        WX: '',
                        XJ: '',
                        ZFB: '',
                        rowCount:0
                    },
                    active: 0,
                    refresh: { hasMore: true, isLoading: false },
                    list: [],
                    form: {
                        optType: 0,
                        mId: 0,
                        payType: 0,
                        biPrice: '',
                        count: 1,
                        biMark: '',
                        currentDay: '',
                        openId: '',
                        state: 'bill'
                    },
                    showAdd: false,
                    oldform: null,
                    eo: {
                        list: [],
                        load: false
                    },
                    currentEo: null,
                    formERR: {
                        eoBrandERR: ''
                    },
                };
            },
            computed: {

            },
            activated: function () {

            },
            watch: {
                active: function (val) {
                    var _this = this;
                    _this.list = [];
                    _this.loadList();
                }
            },
            mounted: function () {
                var _this = this;
                _this.$parent.showHome = true;
                _this.loadList();
            },
            methods: {
                loadList: function (e) {
                    var _this = this;
                    if (!e) {
                        _this.query.pageIndex = 1;
                    };
                    hxt.post({
                        url: hxt.config.link + 'pc/enBillList',
                        data: _this.query,
                        ok: function (res) {
                            if (res.code != 0) {
                                _this.refresh.hasMore = !!e;
                                hxt.error(res.errmsg, '加载失败');
                                return;
                            }
                            var list = _this.query.pageIndex == 1 ? [] : _this.list;
                            _this.list = list.concat(res.data.list);
                            _this.query.pageIndex++;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.rowCount = res.data.rowCount;
                            _this.query.Sum = res.data.Sum;
                            _this.query.Count = res.data.Count;
                            _this.query.Profit = res.data.Profit;
                            _this.query.XJ = res.data.XJ;
                            _this.query.WX = res.data.WX;
                            _this.query.ZFB = res.data.ZFB;
                            _this.refresh.hasMore = res.data.pageIndex * res.data.pageSize < res.data.rowCount;
                        },
                        complete: function () {
                            _this.refresh.isLoading = false;
                        },
                        error: function (err) {
                            _this.refresh.hasMore = !!e;
                        }
                    });
                },
                AddCar: function (type, biId) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + "pc/eoModelList",
                        data: {},
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('获取机油列表失败：' + res.errmsg);
                            _this.eo.list = res.data;
                        }
                    });
                    if (type > 0) {
                        hxt.post({
                            url: hxt.config.link + "pc/enBillObj",
                            data: { biId: biId },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('获取账单详情失败：' + res.errmsg);
                                var g = res.data;
                                if (type == 3) {
                                    _this.form = g;
                                };
                                _this.form.biPrice = g.biPrice;
                                _this.form.count = g.biCount;
                                _this.form.biMark = g.biMark;
                                _this.form.bioldMark = g.biMark;
                                _this.form.currentDay = g.time;
                                _this.form.eoBrand = g.eoBrand;
                                _this.form.eoModel = g.eoModel;
                                _this.form.eoId = g.eoId;
                                _this.form.payType = g.payType;
                                _this.form.biId = g.biId;
                                _this.form.optType = type;
                                _this.form.mId = String(g.eoMid);
                                _this.oldform = JSON.stringify(_this.form);
                                _this.showAdd = true;
                            }
                        });
                        return;
                    };
                    _this.form.optType = type;
                    _this.showAdd = true;
                },
                change: function (data) {
                    var _this = this;
                    if (data.length < 2) return;
                    var bid = data[0].value,
                        mid = data[1].value;
                    var b = _this.eo.list.find(function (item) {
                        return item.value == bid;
                    });
                    var m = b.children.find(function (item) {
                        return item.value == mid;
                    });
                    if (m.eoBrand == _this.form.eoBrand && m.text == _this.form.eoModel) {
                        _this.formERR.eoBrandERR = "品牌型号与原订单相同";
                    } else {
                        _this.formERR.eoBrandERR = "";
                        if (_this.form.optType == 1) _this.form.biMark = _this.form.bioldMark + '  原订单：' + _this.form
                            .eoBrand + '【' + _this.form.eoModel + '】更换为' + m.eoBrand + '【' + m.text + '】';
                    };
                    _this.currentEo = m;
                },
                submit: function () {

                },
                
            },
            components: {
                wxCascader: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/wx/Components/wx.cascader.cshtml"))); }
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .van-submit-bar {
        position: sticky !important;
        z-index: 0 !important;
    }
</style>